<template>
  <div>
    <header>2019级新生报到情况表</header>
    <tab active-color="#37aefc"
         bar-active-color="#37aefc">
      <tab-item @on-item-click="$router.push('/instructor/majorInfo')"
                class="tab-item">报到情况</tab-item>
      <tab-item class="tab-item"
                selected
                @on-item-click="$router.push('/instructor/dormInfo')">宿舍情况</tab-item>
    </tab>
    <p class="time">截至统计时间：{{nowTime}}</p>
    <flexbox>
      <flexbox-item>
        <div class="flex-box">共{{allbed}}床铺</div>
      </flexbox-item>
      <flexbox-item>
        <div class="flex-box">已住{{arrive}}床铺</div>
      </flexbox-item>
      <flexbox-item>
        <div class="flex-box">剩余{{left}}床铺</div>
      </flexbox-item>
    </flexbox>
    <x-table full-bordered
             ref="table"
             style="background-color:#fff;">
      <thead>
        <tr>
          <th>院系</th>
          <th>宿舍数</th>
          <th>已满间</th>
          <th>未满间</th>
          <th>空房间</th>
        </tr>
      </thead>
      <tbody v-for="(row,index) in data"
             :key="index"
             ref="academy">
        <tr @click="show(index)"
            style="cursor: pointer;">
          <td>{{row.academy}}</td>
          <td>{{row.dormitory_count}}</td>
          <td>{{row.full_dormitory}}</td>
          <td>{{row.not_full_dormitory}}</td>
          <td>{{row.empty_dormitory}}</td>
        </tr>
      </tbody>
    </x-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowTime: "2019-08-05 14:00:05",
      data: [],
      allbed: 0,
      arrive: 0,
      left: 0
    };
  },
  updated() {},
  mounted() {
    let _this = this;
    let user = JSON.parse(window.localStorage.getItem("user"));
    if (user == null) {
      _this.$router.push("/admin/login");
    }
    let type = user.type;
    let params = new URLSearchParams();
    params.append("academy", type);
    _this
      .axios({
        method: "get",
        url: "/user/getDormitoryByAcademy",
        params
      })
      .then(resp => {
        if (resp.data.code == 0) {
          let data = resp.data.result;
          _this.data.push(data);
          window.localStorage.setItem(
            "acddorm",
            JSON.stringify(data.dormitory)
          );
          _this.allbed = data.bed_number;
          _this.arrive = data.arrive_num;
          _this.left = data.surplus_bed;
        } else if (resp.data.code == 2) {
          _this.$router.push("/admin/login");
        }
      });
  },
  methods: {
    createNodeByIndex(index) {
      let _this = this;
      let _tbody = this.$refs.academy[index]; //获取整个表格数据
      let nodeTr = [];
      let nodeTd = [];
      let nodeText = [];
      let nodeHead = document.createElement("tr");
      let title = ["宿舍类型", "楼号", "房间号", "人数", "已住"];
      for (let v = 0; v < title.length; v++) {
        nodeTd[v] = document.createElement("th");
        nodeText[v] = document.createTextNode(title[v]);
        nodeTd[v].style.backgroundColor = "#f0f0f0";
        nodeTd[v].appendChild(nodeText[v]);
        nodeHead.appendChild(nodeTd[v]);
      }
      _tbody.appendChild(nodeHead);
      for (let i = 0; i < this.data[index].dormitory.length; i++) {
        nodeTr[i] = document.createElement("tr");
        nodeTr[i].addEventListener("click", function() {
          let clidorm = JSON.parse(window.localStorage.getItem("acddorm"))[i];
          window.localStorage.setItem("clidorm", JSON.stringify(clidorm));
          _this.$router.push("/instructor/dormStu");
        });
        nodeText[0] = document.createTextNode(
          this.data[index].dormitory[i].sex
        );
        nodeText[1] = document.createTextNode(
          this.data[index].dormitory[i].dormitory_num
        );
        nodeText[2] = document.createTextNode(
          this.data[index].dormitory[i].house_num
        );
        nodeText[3] = document.createTextNode(
          this.data[index].dormitory[i].size
        );
        nodeText[4] = document.createTextNode(
          this.data[index].dormitory[i].arrive_num
        );
        for (let j = 0; j < 5; j++) {
          nodeTd[j] = document.createElement("td");
          nodeTd[j].style.backgroundColor = "#f0f0f0";
          nodeTd[j].appendChild(nodeText[j]);
          nodeTr[i].appendChild(nodeTd[j]);
        }
        _tbody.appendChild(nodeTr[i]);
      }
    },
    show(index) {
      let _tbody = this.$refs.academy[index]; //获取整个表格数据
      let trs = _tbody.getElementsByTagName("tr");
      if (trs.length <= 1) {
        this.details = true;
        this.createNodeByIndex(index);
      } else {
        if (this.details) {
          //关闭
          for (let i = 1; i < trs.length; i++) {
            trs[i].style.display = "none";
          }
        } else {
          //打开
          for (let i = 1; i < trs.length; i++) {
            trs[i].style.display = "table-row";
          }
        }
        this.details = !this.details;
      }
    }
  }
};
</script>

<style lang="less" scoped>
header {
  height: 60px;
  line-height: 60px;
  font-size: 21px;
  text-align: center;
  letter-spacing: 1px;
  color: #fff;
  background-color: rgba(11, 83, 155, 1);
}
.time {
  letter-spacing: 1px;
  font-size: 12px;
  text-align: center;
  margin: 15px 0;
  color: rgba(102, 102, 102, 1);
}
.flex-box {
  font-size: 12px;
  color: rgba(102, 102, 102, 1);
}
// vux.class.vux-flexbox
.vux-flexbox {
  text-align: center;
}
</style>


